<template>
	<view>
		<!-- 选择实习/社招 -->
		<view class="top text-lg">
			<view class="top-switch" v-for="(item,index) in switchBtns" :key="index" :class="index==isactive?'top-active':''"
			 @click="topswitch(index)">
				<image :src="index==isactive?item.checkedImageUrl:item.imageUrl" mode=""></image>
				<text>{{item.text}}</text>
			</view>
		</view>
		<!-- 岗位信息填写 -->
		<view class="content">
			<view class="input-box">
				<view class="text-lg title">
					招聘企业
				</view>
				<view class="input-box2">
					<view>
						<input type="text" placeholder="请填写公司名称" v-model="jobDetail.company" placeholder-class="text-md" />
					</view>
					<view class="arrow"></view>
				</view>
			</view>
			<view class="input-box">
				<view class="text-lg title">
					岗位类型
				</view>
				<view class="input-box2">
					<view>
						<picker mode="selector" :range="stations" @change="stationPickerChange">
							<view :class="stationName?'':'holderclass'">{{stationName?stationName:'请选择岗位类型'}}</view>
						</picker>
					</view>
					<view class="arrow"></view>
				</view>
			</view>
			<view class="input-box">
				<view class="text-lg title">
					职位名称
				</view>
				<view class="input-box2">
					<view>
						<input type="text" v-model="jobDetail.name" placeholder="请输入具体职位名称" placeholder-class="text-md" />
					</view>
					<view class="arrow"></view>
				</view>
			</view>

			<view class="flex-box">
				<view>
					<view class="text-lg title">
						经验要求
					</view>
					<view>
						<picker mode="selector" :range="experiences" @change="experiencePickerChange">
							<view class="holderclass">{{experience?experience:"请选择经验"}}</view>
						</picker>
					</view>
				</view>

				<view>
					<view class="text-lg title">
						最低学历
					</view>
					<view>
						<picker mode="selector" :range="educations" @change="educationPickerChange">
							<view class="holderclass">{{education?education:"请选择学历"}}</view>
						</picker>
					</view>
				</view>

				<view>
					<view class="text-lg title">
						薪酬范围
					</view>
					<view v-show="isactive==1">
						<picker mode="multiSelector" :range="moneyList" @change="moneyPickerChange">
							<view class="holderclass">{{money?money:"请选择薪资"}}</view>
						</picker>
					</view>
					<view v-show="isactive==0" class="holderclass" @tap="showModal">
						{{money2?money2+"元/天":"请选择薪资"}}
					</view>
				</view>
			</view>


			<view class="input-box">
				<view class="text-lg title">
					职位描述
				</view>
				<view class="input-box2" @tap="toEditPage">
					<view>
						<input type="text" disabled :placeholder="jobdescribe?'已填写':'请填写职位描述'" placeholder-class="text-md" />
					</view>
					<view class="arrow"></view>
				</view>
			</view>
			<view class="input-box">
				<view class="text-lg title">
					我的邮箱
				</view>
				<view class="input-box2">
					<view>
						<input type="text" v-model="jobDetail.email" placeholder="请填写接收简历的邮箱" placeholder-class="text-md" />
					</view>
					<view class="arrow"></view>
				</view>
			</view>
			<view class="input-box">
				<view class="text-lg title">
					工作地点
				</view>
				<view class="input-box2">
					<view @click="chooseAddress">
						<input type="text" v-model="jobDetail.address" disabled placeholder="请填写工作地址" placeholder-class="text-md" />
					</view>
					<view class="arrow"></view>
				</view>
			</view>
		</view>
		<view class="submit-box">
			<button @tap="submit" class="text-lg" type="default">发布</button>
		</view>

		<!-- 这里是模态窗 -->
		<pickerItem :isShow="isShow" :value="money2" @hideModal="hideModal" @makeSure="setMoney"></pickerItem>

	</view>
</template>

<script>
	import pickerItem from "../../components/pickerItem.vue"

	export default {
		components: {
			"pickerItem": pickerItem
		},
		data() {
			return {
				switchBtns: [{
						text: "实习",
						imageUrl: "../../static/job/sx_w_icon.png",
						checkedImageUrl: "../../static/job/sx_ch.png"
					},
					{
						text: "社招",
						imageUrl: "../../static/job/sz_icon.png",
						checkedImageUrl: "../../static/job/sz_ch.png"
					}
				],
				isactive: 0,
				contentbox: "contentbox",

				jobDetail: {
					company: "", // 公司名称
					jobType: "", // 岗位类型
					name: "", // 职位名称
					qualification: "", // 经验要求
					minEducation: "", // 学历要求
					email: "", // 邮箱
					city: "", // 
					address: "", //
					recruitType: "", // 实习还是社招
					minSalary: "", // 最低薪资
					maxSalary: "", // 最高薪资
					description: "", // 职位简介
					id: "" // 如果是编辑原来的职位的话需要传入ID，否则则为新增
				},

				jobdescribe: false, //因为岗位描述无法在当前页面显示，所以采用提示已填写
				content: "", //岗位描述
				jobaddress: {}, //工作地点

				isShow: false, //是否显示模态窗

				// 学历
				educations: ["不限", "中专", "高中", "大专", "本科", "硕士", "MBA", "博士"],

				// 经验
				experiences: ["不限", "在校生", "应届生", "一年以内"],

				// 岗位类型
				stations: [],

				// 薪资范围
				moneyList: [
					["6K", "7K", "8K", "9K", "10K"],
					["10K", "11K", "12K", "13K"],
					["12月", "13月", "14月"]
				],
			}
		},
		onLoad() {

			this.getJobTypeList()
		},
		methods: {
			submit() {
				let data = {
					company: "", // 公司名称
					jobType: "", // 岗位类型
					name: "", // 职位名称
					qualification: "", // 经验要求
					minEducation: "", // 学历要求
					email: "", // 邮箱
					city: "", // 
					address: "", //
					recruitType: "", // 实习还是社招
					minSalary: "", // 最低薪资
					maxSalary: "", // 最高薪资
					description: "", // 职位简介
					id: "" // 如果是编辑原来的职位的话需要传入ID，否则则为新增
				}
			},

			// 获取岗位类型列表
			getJobTypeList() {
				this.sgAjax.getJobTypeList().then(res => {
					this.stations = res.data.typeList
				})
			},

			// 跳转到编辑工作详情页面
			toEditPage() {
				uni.navigateTo({
					url: "editJobContent",
				})
			},

			// 显示实习薪酬范围模态窗
			showModal() {
				this.isShow = true
			},

			// 隐藏实习薪酬范围模态窗
			hideModal() {
				this.isShow = false
			},

			// 实习-薪酬模态窗的实习工资
			setMoney(money) {
				this.money2 = money
				this.hideModal()
			},

			// 岗位选择
			stationPickerChange(e) {
				this.jobDetail.jobType = this.stations[e.detail.value]
			},

			// 经验选择
			experiencePickerChange(e) {
				this.jobDetail.qualification = this.experiences[e.detail.value]
			},

			// 学历选择
			educationPickerChange(e) {
				this.jobDetail.minEducation = this.educations[e.detail.value]
			},

			// 薪资选择
			moneyPickerChange(e) {
				console.log("这里是薪资选择：", e.detail.value)
			},

			// 地址选择
			chooseAddress() {
				uni.chooseLocation({
					success: res => {
						this.jobaddress = res
					}
				})
			},

			// 选择实习/社招
			topswitch(index) {
				this.isactive = index
			}
		},
		onShow() {
			// 获取到用户填入的工作详情的内容
			this.content = uni.getStorageSync("content") ? uni.getStorageSync("content") : ""
		},
		watch: {
			// 监听详情内容的改变，从而来改变是否显示已填写
			content(val) {
				console.log("工作详情内容更改为：", val)
				if (val.text) {
					this.jobdescribe = val.text.length - 1 ? true : false
				} else {
					this.jobdescribe = val.length ? true : false
				}
			}
		}
	}
</script>

<style scoped>
	.pickerview {
		width: 200rpx;
		height: 300rpx;
		background-color: red;
	}

	.holderclass {
		color: rgba(4, 3, 25, 0.5);
	}

	.contentbox {
		position: absolute;
		bottom: 0;
		width: 100%;
		height: 100vh;
		opacity: 0.7;
		background: #111111;
		z-index: 30;
		display: none;
	}

	.contentactive {
		display: block;
	}

	.text-lg {
		font-size: 32rpx;
	}

	.text-md {
		font-size: 28rpx;
	}

	.text-sm {
		font-size: 24rpx;
	}

	.text-xs {
		font-size: 22rpx;
	}

	.content {
		padding: 30rpx;
		padding-bottom: 0;
		width: 100%;
		box-sizing: border-box;
	}

	.title {
		font-weight: bold;
	}

	.top {
		display: flex;
		flex-direction: row;
		justify-content: center;
	}

	.top image {
		width: 32rpx;
		height: 32rpx;
		margin-right: 8rpx;
	}

	.top-switch {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		height: 80rpx;
		width: 250rpx;
		border-radius: 40rpx;
		color: #040319;
		opacity: 0.4;
	}

	.top-active {
		background-color: #1B82FE;
		color: #FFFFFF;
		box-shadow: 0 8px 10px -6px rgba(0, 38, 208, 0.30);
		opacity: 1;
	}

	.arrow {
		width: 6px;
		height: 6px;
		border-top: 2rpx solid rgba(0, 0, 0, 0.3);
		border-right: 2rpx solid rgba(0, 0, 0, 0.3);
		transform: rotate(45deg);
		margin-left: 21rpx;
	}

	.input-box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 39rpx 0;
		border-bottom: 1rpx solid rgba(4, 3, 25, 0.1);
	}

	.input-box:last-child {
		border: none;
	}

	.input-box2 {
		display: flex;
		align-items: center;
		text-align: right;
	}

	.input-box2 input {
		color: rgba(4, 3, 25, 0.6);
	}

	.submit-box button {
		width: 368rpx;
		height: 80rpx;
		background-color: #1B82FE;
		box-shadow: 0 8px 12px -2px rgba(0, 98, 216, 0.30);
		border-radius: 8rpx;
		color: #FFFFFF;
		margin-top: 39rpx;
	}

	.flex-box {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		text-align: center;
		border-bottom: 1rpx solid rgba(4, 3, 25, 0.1);
		padding: 39rpx 0;
	}

	.flex-box .text-lg {
		margin-bottom: 32rpx;
	}
</style>
